import React from 'react'
import { AlertTriangle, Lock, Sparkles } from 'lucide-react'

const DemoModeAlert = ({ isOpen, onClose, title = "演示模式" }) => {
  if (!isOpen) return null

  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose()
    }
  }

  return (
    <div 
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      onClick={handleBackdropClick}
    >
      <div className="bg-white rounded-lg shadow-xl border border-gray-200 max-w-md w-full mx-4 transform transition-all duration-300 scale-100">
        {/* 头部 */}
        <div className="bg-gray-50 border-b border-gray-200 p-6 rounded-t-lg">
          <div className="flex items-center justify-center mb-3">
            <div className="bg-blue-100 rounded-full p-3">
              <Sparkles className="h-8 w-8 text-blue-600" />
            </div>
          </div>
          <h3 className="text-xl font-bold text-center text-gray-800">{title}</h3>
        </div>

        {/* 内容 */}
        <div className="p-6">
          <div className="flex items-center justify-center mb-4">
            <div className="bg-yellow-100 rounded-full p-3">
              <Lock className="h-6 w-6 text-yellow-600" />
            </div>
          </div>
          
          <div className="text-center mb-6">
            <p className="text-gray-700 text-lg mb-2">
              🎭 现在在演示期
            </p>
            <p className="text-gray-600">
              为了稳定考量，暂时不支持操作
            </p>
          </div>

          {/* 装饰元素 */}
          <div className="flex justify-center items-center space-x-2 mb-6">
            <div className="h-2 w-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div className="h-2 w-2 bg-purple-400 rounded-full animate-pulse delay-100"></div>
            <div className="h-2 w-2 bg-pink-400 rounded-full animate-pulse delay-200"></div>
          </div>

          {/* 按钮 */}
          <button
            onClick={onClose}
            className="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
          >
            我知道了
          </button>
        </div>

        {/* 底部装饰 */}
        <div className="bg-gray-50 px-6 py-3 rounded-b-lg border-t">
          <div className="flex items-center justify-center text-sm text-gray-500">
            <AlertTriangle className="h-4 w-4 mr-1" />
            感谢您的理解与支持
          </div>
        </div>
      </div>
    </div>
  )
}

export default DemoModeAlert
